<template>
  <!-- 日榜 周榜 月榜 +日期   -->
<van-sticky :offset-top="'2.4rem'" z-index="98">
  <div class="chioce_box">
    <div class="bgbox">
      <van-dropdown-menu active-color="#1779ff" class="s_date_box">
        <van-dropdown-item ref="ref1" :title="title1">
          <van-cell class="f_box1">
            <template v-for="(item) in fDate">
              <button
                :class="item.active?'active':''"
                class="num"
                @click="checkedDate(item)"
                :key="'btn'+item.text"
              >{{item.text}}</button>
            </template>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-dropdown-menu active-color="#1779ff" class="s_all_box" v-if="show >= 2">
        <van-dropdown-item ref="ref" title="筛选">
          <van-cell>
            <div class="filtr_select_box">
              <div class="fsb_box">
                <van-collapse v-model="filtrActive">
                  <van-collapse-item title="达人行业" :name="1">
                    <div class="f_btn_box">
                      <template v-for="item,idx in typeDatas">
                        <i
                          @click="industryFn(item)"
                          :key="idx"
                          :class="{'active':item.active}"
                        >{{item.category_name}}</i>
                      </template>
                      <i class="more" @click="unfoldMoreFn">{{isUnfold?'收起':'展开更多'}}</i>
                    </div>
                  </van-collapse-item>
                  <van-collapse-item title="观众性别" :name="2">
                    <div class="f_btn_box">
                      <i
                        v-for="item,idx in genderData"
                        :class="{'active':item.active}"
                        @click="genderCheckedFn(item)"
                        :key="idx"
                      >{{item.text}}</i>
                    </div>
                  </van-collapse-item>
                  <van-collapse-item title="视频时长" :name="3">
                    <div class="f_btn_box">
                      <i
                        v-for="item,idx in durationData"
                        :class="{'active':item.active}"
                        @click="durationCheckedFn(item)"
                        :key="idx"
                      >{{item.text}}</i>
                    </div>
                  </van-collapse-item>
                </van-collapse>
              </div>
              <div class="is_pro">
                <i :class="isPro?'activeC':''" @click="isPro = isPro?0:1"></i>
                <span @click="isPro = isPro?0:1">是否带货</span>
              </div>
            </div>
            <div class="f_btns_sub">
              <i @click="resetFn">重置</i>
              <i class="active" @click="submitFn">确定</i>
            </div>
          </van-cell>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <!-- <div></div> -->
  </div>
  <!-- </div> -->
  </van-sticky>
</template>

<script>
export default {
  props: ['show'],
  data() {
    return {
      title1: '24小时',
      filtrActive: [1, 2, 3], //默认打开哪个筛选条件
      typeDatas: [], //行业分类
      typeDatas2: [], //行业分类后面的数据（点击展开之后拼接的数据）
      isUnfold: false, //是否展开更多
      fDate: [
        //筛选-达人行业
        { text: '24小时', val: '24h', active: true },
        { text: '近3天', val: '3d', active: false },
        { text: '近7天', val: '7d', active: false },
        { text: '近30天', val: '30d', active: false },
        { text: '近90天', val: '90d', active: false }
      ],
      genderData: [
        //筛选-观众性别
        { text: '不限', val: 3, active: true },
        { text: '男', val: 1, active: false },
        { text: '女', val: 2, active: false }
      ],
      durationData: [
        //筛选-视频时长
        { text: '不限', val: '不限', active: true },
        { text: '0-15s', val: '0-15000', active: false },
        { text: '16-30s', val: '16000-30000', active: false },
        { text: '31-60s', val: '30000-60000', active: false },
        { text: '>60s', val: '60000-999999999999999', active: false }
      ],
      categoryId: 0,
      gender: 3,
      duration: '不限',
      isPro: 0 //是否带货0不带 1
    };
  },
  created() {
    if (this.show >= 2) {
      this.getTypes();
    }
    // this.submitFn();
  },
  watch: {},
  methods: {
    getTypes() {
      //获取分类
      this.$axios({
        method: 'get',
        url: '/api/category/search'
      })
        .then(res => {
          if (res.data.code == 0) {
            if (res.data.data.length) {
              res.data.data.forEach((item, idx) => {
                item.active = !Boolean(idx);
              });
              this.typeDatas = res.data.data.slice(0, 11);
              this.typeDatas2 = res.data.data.slice(11, res.data.data.length);
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    durationCheckedFn(dateItem) {
      //选中视频时长
      this.durationData.forEach(item => {
        item.active = dateItem == item;
      });
      this.duration = dateItem.val;
    },
    genderCheckedFn(dateItem) {
      //选中观众性别
      this.genderData.forEach(item => {
        item.active = dateItem == item;
      });
      this.gender = dateItem.val;
    },
    unfoldMoreFn() {
      this.isUnfold = !this.isUnfold;
      if (this.isUnfold) {
        this.typeDatas = this.typeDatas.concat(this.typeDatas2);
      } else {
        this.typeDatas = this.typeDatas.slice(0, 11);
      }
    },
    industryFn(item) {
      //筛选-点击行业分类
      this.typeDatas.forEach(itemC => {
        itemC.active = item == itemC;
      });
      this.typeDatas2.forEach(itemC => {
        itemC.active = item == itemC;
      });
      console.log();
      this.categoryId = item.id;
    },
    resetFn() {
      //重置
      this.categoryId = 0;
      this.gender = 3;
      this.duration = '不限';
      this.isPro = 0; //是否带货0不带 1
      this.typeDatas.forEach((item, idx) => {
        item.active = !Boolean(idx);
      });
      console.log(this.typeDatas);
      this.genderData.forEach((item, idx) => {
        item.active = !Boolean(idx);
      });
      this.durationData.forEach((item, idx) => {
        item.active = !Boolean(idx);
      });
    },
    submitFn() {
      this.$emit('formatwdate1', {
        duration: this.duration,
        gender: this.gender,
        categoryId: this.categoryId,
        isPro: this.isPro
      });
      if (this.$refs.ref) {
        this.$refs.ref.toggle(); //关闭弹窗
      }
    },

    checkedDate(dateItem) {
      //点击日期筛选
      this.fDate.forEach(item => {
        item.active = dateItem == item;
      });
      this.title1 = dateItem.text;
      this.$emit('formatwdate', dateItem.val);
      this.$refs.ref1.toggle(); //关闭弹窗
    }
  }
};
</script>

<style lang="stylus" scoped>
@import './../../../common/common.styl';

.active {
  background: #fd7f2c !important;
  color: #fff !important;
}

.f_box1 {
  padding: 0 rem(60);
  padding-top: rem(40) !important;
}

.chioce_box {
  width: 100%;
  height: 1.0667rem;
  // border-top: 1px solid #e5e5e5;
  > .bgbox {
    width: 100%;
    height: 1.0667rem;
    padding:0 .48rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #fff;
    justify-content: space-between;
  }

  .num {
    // padding: .266667rem .386667rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-bottom: 0.266667rem !important;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    background: #f1f1f1;
    color: #666666;
    line-height: 0.853333rem;
  }

  .num:hover {
    color: #fff;
    background: #fd7f2c;
  }

  .select1 {
    font-size: 0.373333rem;
    color: #fff !important;
    background-color: #fd7f2c !important;
    border: 1px solid #fd7f2c;
  }

  .select {
    flex: 2.3;
    width: 13.333333rem;
  }
}

.filtr_select_box {
  position: relative;
  max-height: 100%;
  padding-bottom: rem(120);
  box-sizing: border-box;
  background-color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  .f_btn_box {
    display: flex;
    flex-wrap: wrap;
    font-size: 0;

    i {
      display: inline-block;
      box-sizing: border-box;
      width: rem(212);
      height: rem(64);
      margin-bottom: rem(23);
      margin-right: rem(20);
      line-height: rem(64);
      border-radius: rem(10);
      font-size: rem(26);
      border: solid 1px #e5e5e5;
      text-align: center;
      font-style: normal;
      color: #555;

      &:nth-child(3n) {
        margin-right: 0;
      }

      &.active {
        background-color: #fff4ed;
        border-color: #fd7f2c;
        color: #fd7f2c;
      }

      &.more {
        color: #fd7f2c;
      }
    }
  }

  .is_pro {
    padding: rem(20) 0 rem(40);
    margin: 0 rem(30);
    border-top: 1px solid #ebedf0;
    text-align: right;

    i {
      display: inline-block;
      width: rem(26);
      height: rem(26);
      border-radius: rem(4);
      vertical-align: middle;
      border: 1px solid #e1e1e1;

      &.activeC {
        bgp('./../../../assets/img/checked.png');
        background-color: #fd7f2c;
        border: 1px solid #fd7f2c;
      }
    }

    span {
      display: inline-block;
      margin-left: rem(10);
      font-size: rem(28);
      vertical-align: middle;
    }
  }
}

.f_btns_sub {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: rem(20) 0;
  text-align: center;
  font-size: 0;
  box-sizing: border-box;
  background-color: #fff;

  i {
    display: inline-block;
    width: rem(200);
    height: rem(78);
    line-height: rem(78);
    font-size: rem(28);
    text-align: center;
    border-radius: rem(10);
    border: solid 1px #e5e5e5;
    background-color: #fff;
    font-style: normal;
    color: #888;

    &.active {
      background-color: #fd7f2c;
      border-color: #fd7f2c;
      color: #fff;
    }

    &:first-child {
      margin-right: rem(27);
    }
  }
}
</style>
